<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      lang="#{indBn.localeUrlCode}">
    <h:head>
        <title>#{indBn.pageTitle}</title>
        <link rel="icon" href="/favicon.ico"/>
        <meta lang="#{mainMenuBean.localeUrlCode}"/>
        <meta name="keywords" content="#{indBn.keyWords}"/>
        <meta name="description" content="#{indBn.description}"/>
        <meta property="og:title" content="TrendEconomy"/>
        <meta property="og:url" content="http://trendeconomy.com"/>
        <meta property="og:image" content="#{mainMenuBean.httpHeader}/resources/images/og_#{mainMenuBean.localeUrlCode}.png"/>
        <meta property="og:image:width" content="1000"/>
        <meta property="og:image:height" content="500"/>
        <meta property="og:type" content="article"/>
        <meta property="og:description" content="#{indBn.pageTitle}"/>
        <link rel="stylesheet" type="text/css" href="/resources/css/gw.m.css"/>
        <link rel="stylesheet" type="text/css" href="/resources/fa/css/font-awesome.min.css"/>
        <link href="/resources/fa/fonts/fontawesome-webfont.woff"/>
        <script type="text/javascript" src="/resources/js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="/resources/js/jquery.mobile.custom.min.js"></script>
        <script type="text/javascript" src="/resources/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/resources/js/raphael.js"></script>
        <script type="text/javascript" src="/resources/js/gw.js"></script>
        <link rel="alternate" hreflang="x-default" href="#{mainMenuBean.urlEn}" />
        <link rel="alternate" hreflang="#{mainMenuBean.hrefLangEn}" href="#{mainMenuBean.urlEn}" />
        <link rel="alternate" hreflang="#{mainMenuBean.hrefLangRu}" href="#{mainMenuBean.urlRu}" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    </h:head>
    <h:body>
        <ui:include src="header.xhtml"/>

        <div class="gw-showhide-chld" gw-showhide-prnt="mnStg" style="margin:2px;vertical-align:top;">
            <h2 class="gw-block-header">#{indBn.UI_TITLE_INDICATORS}</h2>
            <c:forEach items="#{indBn.filterSelectedItemsIndicator}" var="d">
                <div class="gw-table-row gw-table-row-hl">
                    <div class="gw-tree-cell"><div class="gw-tree-active-border1"><div class="gw-tree-cell-selected1"/></div></div>
                    <div class="gw-tree-cell">#{d.name}</div>
                </div>
            </c:forEach>
            <div class="gw-tree" gw-url-load-children="#{indBn.includeTreeIndicatorChildren}" gw-url-load-search="#{indBn.includeTreeIndicatorSearch}">
                <div class="gw-search"><input class="gw-search-text" type="text"/>
                    <div class="gw-tree-cell gw-search-button"></div>
                    <div class="gw-tree-cell gw-search-progress"></div>
                    <div class="gw-tree-cell gw-search-clear"></div>
                </div>
                <ui:include src="/tree/treeIndicatorsInit.xhtml"/>
                <div class="gw-search-results" style="min-height:100px;"/>
            </div>
        </div>

        <div id="a1" style="margin:2px;vertical-align:top;">
            <h1 class="gw-block-header">#{indBn.shortTitle}</h1>
            <c:choose >
                <c:when test="#{indBn.hasData}">
                    <div id="g1" class="gw-gr gw-non-selectable" gw-graph-type="line" gw-graph-height="200" lang="#{indBn.localeUrlCode}" gw-graph-min="2001" style="max-width:780px;padding-left:10px;padding-right:1px;padding-top:1px;padding-bottom:1px;">
                        <div class="gw-gr-head">
                            <div class="gw-gr-drag-back">
                                <div class="gw-gr-drag-back-start"/>
                                <div class="gw-gr-drag gw-gr-drag-left"><div class="gw-gr-drag-inside"/></div>
                                <div class="gw-gr-drag-middle"/>
                                <div class="gw-gr-drag gw-gr-drag-right"><div class="gw-gr-drag-inside"/></div>
                                <div class="gw-gr-drag-back-end"/>
                            </div>
                        </div>
                        <div class="gw-gr-body" style="height:200px;"></div>
                        <div class="gw-gr-foot" style="text-align:center;">
                            <c:forEach items="#{indBn.filterSelectedItemsCountry}" var="dc">
                                <a href="#{indBn.getSelectedCountryUrl(dc.urlCode)}" class="gw-table-cell gw-gr-legend-block"><div class="gw-table-cell-graph gw-gr-legend" style="background:#{dc.color};"></div><div class="gw-table-cell gw-gr-legend-text">#{dc.name}</div></a>
                            </c:forEach>
                        </div>

                        <table style="width:100%;">
                            <thead>
                                <tr>
                                    <th gw-gr-type="x" gw-gr-id="period_id">#{indBn.UI_TITLE_PERIOD}</th>
                                    <c:forEach items="#{indBn.filterSelectedItemsCountry}" var="d">
                                        <th gw-gr-type="g" gw-gr-color="#{d.color}" gw-gr-id="#{d.id}">#{d.name}
                                            <div class="gw-balloon-content" style="border-color:#{d.color}">
                                                <table style="max-width:150px;">
                                                    <tr><td class="gw-bllb">#{indBn.UI_TITLE_COUNTRY}:</td><td class="gw-blv">#{d.name}</td></tr>
                                                    <tr><td class="gw-bllb">#{indBn.UI_TITLE_PERIOD}:</td><td class="gw-blv">[x]</td></tr>
                                                    <tr><td class="gw-bllb">#{indBn.UI_TITLE_INDICATOR}:</td><td class="gw-blv">#{indBn.selectedIndicatorName}</td></tr>
                                                    <tr><td class="gw-bllb">#{indBn.UI_TITLE_VALUE}:</td><td class="gw-blv">[valueSF] #{indBn.selectedIndicatorUom}</td></tr>
                                                </table>
                                            </div>
                                        </th>
                                    </c:forEach>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="#{indBn.graphItems}" var="gi">
                                    <tr style="display:none;">
                                        <td gw-grv="#{gi.yearId}">#{gi.yearId}</td>
                                        <c:forEach items="#{gi.details}" var="gid">
                                            <td gw-grv="#{gid.valueStr}">#{gid.valueStr}</td>
                                        </c:forEach>
                                    </tr>
                                </c:forEach>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td style="text-align:center;">
                                        <div class="gw-log"></div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </c:when>
                <c:otherwise>
                    <p class="gw-no-data">#{indBn.UI_INFO_INDICATORS_NO_DATA}</p>
                </c:otherwise>
            </c:choose>
            <div class="gw-block-header">#{indBn.UI_TITLE_INFO}</div>
            <p style="margin-bottom:10px;">#{indBn.notes}</p>
            <c:choose >
                <c:when test="#{indBn.hasData}">
                    <div class="gw-t-cnt" style="min-height:150px;width:1px;">
                        <table class="gw-t gw-t-02" style="table-layout:fixed;">
                            <thead>
                                <tr>
                                    <th class="gw-th gw-th-fr gw-th-02">#{indBn.UI_TITLE_COUNTRY}</th>
                                    <th class="gw-th gw-th-fr-back gw-th-02">#{indBn.UI_TITLE_COUNTRY}</th>
                                    <c:forEach items="#{indBn.periods}" var="p">
                                        <th class="gw-th gw-th-02">#{p}</th>
                                    </c:forEach>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="#{indBn.tableItems}" var="ti">
                                    <tr class="gw-tr gw-tr-01">
                                        <td class="gw-td-fr gw-th gw-th-02">#{ti.countryName}</td>
                                        <td class="gw-td-fr-back gw-th-02">#{ti.countryName}</td>
                                        <c:forEach items="#{ti.details}" var="tiv"><td class="gw-td gw-td2" style="text-align:right;white-space:nowrap;">#{tiv}</td></c:forEach>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </c:when>
            </c:choose>
        </div>


            <!--
        <div style="display:table-cell;min-width:170px;max-width:180px;width:18%;height:1px;margin:5px;vertical-align:top;">
            <h2 class="gw-block-header">#{indBn.UI_TITLE_COUNTRIES}</h2>
            <c:forEach items="#{indBn.filterSelectedItemsCountry}" var="d">
                <a href="#{indBn.getSelectedCountryUrl(d.urlCode)}" class="gw-table-row gw-table-row-hl">
                    <div class="gw-tree-cell"><div class="gw-tree-active-border1"><div class="gw-tree-cell-selected1"/></div></div>
                    <div class="gw-tree-cell">#{d.name}</div>
                </a>
            </c:forEach>
            <div class="gw-tree" gw-url-load-children="#{indBn.includeTreeCountryChildren}" gw-url-load-search="#{indBn.includeTreeCountrySearch}">
                <div class="gw-search"><input class="gw-search-text" type="text"/>
                    <div class="gw-tree-cell gw-search-button"></div>
                    <div class="gw-tree-cell gw-search-progress"></div>
                    <div class="gw-tree-cell gw-search-clear"></div>
                </div>
                <ui:include src="/tree/treeCountriesInit.xhtml"/>
                <div class="gw-search-results" style="min-height:100px;"/>
            </div>
        </div>

            -->

        <ui:include src="footer.xhtml"/>
        <div class="gw-ftr-bck" style="padding:8px;font-size:12px;">#{indBn.description}</div>
        <ui:include src="/const/ga.html"/>
    </h:body>
</html>